<template>
  <div class="app-header-container" :style="props.setStyle">
    <template v-if="props.viewBtn">
      <div class="back-btn" @click="back">
        <el-icon color="#4E5969" size="16"><ArrowLeft /></el-icon>
        <span class="back">返回</span>
      </div>
      <div class="line"></div>
    </template>
    <el-breadcrumb
      class="app-breadcrumb"
      :class="{ 'app-breadcrumb-left': !props.viewBtn }"
      separator="/"
    >
      <template v-for="(item, index) in props.breadList" :key="index">
        <template v-if="item.path">
          <el-breadcrumb-item :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
        </template>
        <template v-else>
          <el-breadcrumb-item>{{ item.title }}</el-breadcrumb-item>
        </template>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  breadList: {
    type: Array,
    default: () => []
  },
  setStyle: {
    type: Object,
    default: () => {
      return {
        backgroundColor: '#fff',
        marginBottom: '17px'
      }
    }
  },
  viewBtn: {
    type: Boolean,
    default: false
  }
})
const back = () => {
  router.go(-1)
}
</script>

<style lang="scss" scoped>
.app-header-container {
  border-radius: 6px;
  display: flex;
  height: 55px;
  .back-btn {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    .back {
      font-size: 14px;
      font-family: AliRegularL3;
      font-weight: 400;
      color: #3d3d3d;
      margin-left: 10px;
    }
  }
  .line {
    width: 1px;
    height: 12px;
    background: #bfc4cf;
    margin: 21px 20px;
  }
  .app-breadcrumb-left {
    margin-left: 8px;
  }
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 55px;
    // margin-left: 8px;

    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
}
</style>
